<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>DCO签署</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <style>
    body {
      background-color: #f0f0f0; /* 可以设置一个背景颜色以替代背景图片 */
      margin: 0;
      padding: 0;
      font-family: Roboto-Regular, sans-serif;
    }
    .header {
      margin: 10px 20px;
      font-size: 6vw; /* 使用vw单位使字体大小响应式 */
      font-weight: bold;
      text-align: left;
    }
    .container {
      display: flex;
      flex-direction: column; /* 在小屏幕上改为列布局 */
      justify-content: space-between; /* 保持内容和按钮之间的间距 */
      align-items: center;
      height: calc(100vh - 100px); /* 减去header和footer的高度 */
      padding: 10px 20px;
      background-image: url('./img/background.png');  /* 确保路径正确 */
      background-size: cover; /* 使背景图片覆盖整个内容区域 */
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
    }
    .content {
      margin-right: 0;
      text-align: center; /* 在小屏幕上改为居中对齐 */
      color: #424242;
      font-size: 4vw; /* 使用vw单位使字体大小响应式 */
      line-height: 1.5;
      font-weight: 700;
      width: 100%; /* 使内容区域占满整个容器 */
      padding: 20px;
      background-color: rgba(255, 255, 255, 0.8); /* 添加半透明背景色以增强可读性 */
    }
    .buttons {
      display: flex;
      flex-direction: column;
      width: 100%; /* 使按钮区域占满整个容器 */
      align-items: center; /* 使按钮在小屏幕上居中对齐 */
    }
    .myBtn {
      width: 90%; /* 在小屏幕上使用相对宽度 */
      height: 4rem;
      font-size: 1.8rem; /* 增加字体大小以适应小屏幕 */
      margin: 1rem 0;
      border-radius: 2rem;
    }
    .myBtn, .myBtn:active, .myBtn:focus, .myBtn:hover {
      color: #fff;
      background: linear-gradient(90deg, #87CEEB, #B0E0E6);  /* 浅蓝色渐变 */
    }
    .buttons button {
      margin-bottom: 10px;
    }
    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 10px 0;
      font-size: 14px;
    }

    /* 媒体查询，针对手机屏幕进行优化 */
    @media (max-width: 600px) {
      .header {
        font-size: 8vw; /* 增加字体大小以适应小屏幕 */
      }
      .content {
        font-size: 5vw; /* 增加字体大小以适应小屏幕 */
        text-align: center;
      }
      .myBtn {
        width: 80%; /* 在小屏幕上使用更小的相对宽度 */
        font-size: 1.6rem; /* 调整按钮字体大小 */
        margin: 0.8rem 0;
      }
    }
  </style>
</head>
<body>

<div class="header">AtomGit</div>

<div class="container">
  <div class="content">
    <div>开发者原创声明</div>
    <div style="margin-top: 10px;">Developer Certificate of Origin</div>
  </div>
  <div class="buttons">
    <button class="layui-btn layui-btn-normal myBtn">查寻DCO签署状态</button>
    <button class="layui-btn layui-btn-primary myBtn">签署DCO</button>
  </div>
</div>

<div class="footer">
  开放原子开源基金会版权所有 | 京ICP备2020036654号-3 | Copyright © 2022 OPENATOM FOUNDATION. All rights reserved.
</div>

<script src="../layui/layui.js"></script>
<script>
  layui.use(['layer', 'form'], function(){
    var layer = layui.layer;
    var form = layui.form;

    // 示例：点击按钮时的提示
    document.querySelector('.buttons button:first-child').addEventListener('click', function() {
      layer.msg('正在查寻DCO签署状态...');
    });

    document.querySelector('.buttons button:last-child').addEventListener('click', function() {
      layer.msg('正在签署DCO...');
    });
  });
</script>

</body>
</html>
